<template>
	<div class="home">
    <div class="custom-home-header">
      <div class="title">EasyLaw</div>
      <div class="sub-title">The elbsest ingel ald far ntemsrtlens students</div>
    </div>
    <div class="banner-box">
      <u-swiper :list="bannerList"  img-mode="scaleToFill" :height="300"></u-swiper>
    </div>
    <u-notice-bar mode="vertical" :list="noticeList"></u-notice-bar>
    <div class="content">
      <div class="menu-item" @click="routeTo(item.title)" v-for="item in menuList" :style="{backgroundColor: item.color}">
        <img :src="item.img" alt="">
        <div class="menu-detail">
          <div class="menu-name">{{ item.title }}</div>
          <div class="menu-desc">{{ item.desc }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
	export default {
    components: {
    },
		data() {
			return {
        bannerList: [],
        noticeList: [
          'EasyLaw上线了！',
        ],
        menuList: [
          {
            img: '/static/icon1.png',
            title: 'LawKnow',
            desc: 'LawKnow',
            color: 'rgb(104,192,255)'
          },
          {
            img: '/static/icon2.png',
            title: 'LawPractice',
            desc: 'LawPractice',
            color: 'rgb(255,191,109)'
          },
          {
            img: '/static/icon3.png',
            title: 'LawFun',
            desc: 'LawFun',
            color: 'rgb(151,222,100)'
          },
          {
            img: '/static/icon4.png',
            title: 'LawAsk',
            desc: 'LawAsk',
            color: 'rgb(84,188,189)'
          }
        ]
			}
		},
		onLoad() {
      this.$api.bannerList().then(res => {
        this.bannerList = res.map(el => {
          return {
            image: this.$baseUrl + el.image,
            title: el.name
          }
        })
      })
		},
		methods: {
      routeTo(path) {
        this.$u.route({
          type: 'navigateTo',
          url: `/pages/${path}/${path}`
        })
      }
		}
	}
</script>

<style lang="scss">
.home {
  .menu-item{
    display: flex;
    padding: 20rpx 0;
    border-radius: 4px;
    align-items: center;
    margin-bottom: 20rpx;
    img {
      width: 80rpx;
      height: 80rpx;
      opacity: 0.6;
      margin-right: 40rpx;
      margin-left: 100rpx;
    }
    .menu-detail {
      display: flex;
      flex-direction: column;
      justify-content: center;
      .menu-name {
        font-size: 48rpx;
        color: #FFFFFF;
      }
      .menu-desc {
        font-size: 24rpx;
        color: #FFFFFF;
        opacity: 0.5;
      }
    }
  }
  .custom-home-header {
    height: 100rpx;
    background-color: #409eff;
    color: #FFFFFF;
    display: flex;
    align-items: center;
    .title {
      font-size: 36rpx;
      line-height: 100rpx;
      padding-left: 50rpx;
    }
    .sub-title {
      font-size: 24rpx;
      color: #a6a2a2;
      margin-left: 20rpx;
      padding-top: 50rpx;
    }
  }
  .content {
    padding: 20rpx;
  }
  .banner-box {
    background-color: #ffffff;
  }
}
</style>
